{extend name="layout/layout" /}

{block name="navbar"}{/block}
{if condition="session('source')"}
{block name="header"}{/block}
{/if}
{block name="style"}
<link rel="stylesheet" href="/assets/js/Huploadify/Huploadify.css">
<style>
	.mui-table-view .mui-media-object{
		max-width: 100px;
		height: 100px;
	}
	
	.mui-table-view{
		margin-bottom: 10px;
	}

	.img-list>div{
		text-align: center;
		
		line-height: 	95px;
		padding: 3px;
	}

	.img-list .icon-img{
		padding-top: 15px;
	}
	.icon-img .iconfont{
		font-size:50px;
	}

	.img-list>div .img-div{
		height: 	95px;
		border: 1px solid #ddd;
	}

	.img-title{
		border: 1px solid #ddd;
	}
	.img-title:after{
		height: 0;
	}

	.return-amount{
		color: #ccc;
	}

	.amount-tips{
		line-height: 35px;
	}

	input[type="text"] {
		margin-bottom: 0;
		width: 80%;
		border:none;
		font-size:14px;
		padding: 0 5px;
		height: 35px;
	}

	input[type="text"].amount-input{
		color: #e60012;
		border:none;
	}

	input[type="text"].disabled-amount{
		color: #EA95A7;
	}

    .submit-btn{
    	height: 45px;
    	line-height: 45px;
    	background: #FE0036;
    	color:#fff;
    	position: fixed;
    	bottom: 0;
    	left: 0;
    	width: 100%;
    	text-align: center;
    	z-index: 9;
    }


    .mask{
    	background: rgba(0, 0, 0, 0.4);
    	position: fixed;
    	z-index: 20;
    	width: 100%;
    	top:0;
    	left: 0;
    	height: 100%;
    }

    .mask .mask-container{
    	position: fixed;
    	bottom: 0;
    	left: 0;
    	width: 100%;
    	background: #fff;
    }

    .mask .mask-title{
    	height: 45px;
    	line-height: 45px;
    	text-align: center;
    	border-bottom: 1px solid #ddd;
    }

    .mask .mask-close-btn{
    	height: 45px;
    	line-height: 45px;
    	background: #FE0036;
    	color:#fff;
    	width: 100%;
    	text-align: center;
    	position: absolute;
    	bottom: 0;
    }

    .mask .mui-table-view{
    	margin: 0;
    }

    .mask .mask-list{
    	max-height: 400px;
    	overflow-y: scroll;
    	margin-bottom: 50px;
    }

    .mask .mui-table-view-cell{
    	padding: 10px 0;
    }

    .tips{
    	margin-right: 20px;
    	font-size: 12px;
    }
</style>
{/block}

{block name="main"}
	<div class="apply" v-cloak>
		<div class="mui-row mui-text-center img-list mui-hidden">
			<div class="mui-col-xs-4">
				<div id="up"></div>
			</div>
		</div>
		<div class="goods">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" :src="goods.original_image">
						<div class="mui-media-body">
							<p class="mui-ellipsis-2">{{goods.goods_name}}</p>
							<p class='mui-ellipsis' v-if="goods.spec_name">{{goods.spec_name}}</p>
						</div>
					</a>
				</li>
			</ul>
		</div>
		
		<div class="types">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" v-if="get_datas.after_type != 3">
					<a class="mui-navigate-right" @tap.prevent="showMask=show_mask_goods=true">
						货物状态
						<p class="mui-pull-right tips">{{goods_status_tips}}</p>
					</a>
				</li>
				<li class="mui-table-view-cell" v-if="get_datas.after_type != 3">
					<a class="mui-navigate-right" @tap.prevent="showMask=show_mask_return=true">
						退款原因
						<p class="mui-pull-right tips">{{return_reason_tips}}</p>
					</a>
				</li>
				<li class="mui-table-view-cell" v-if="get_datas.after_type == 3">
					<a class="mui-navigate-right" @tap.prevent="showMask=show_mask_exchange=true">
						换货原因
						<p class="mui-pull-right tips">{{exchange_reason_tips}}</p>
					</a>
				</li>
			</ul>
		</div>

		<!-- 退款不可更换金额，退款退货可更改金额，换货不显示 -->
		<ul class="mui-table-view" v-if="get_datas.after_type != 3">
			<li class="mui-table-view-cell">
				<div class="mui-pull-left amount-tips">
					退款金额: <b class="text-theme">￥</b> 
				</div>
				<div class="mui-pull-left amount-input-div">
					<input type="text" v-if="get_datas.after_type == 1" class="amount-input disabled-amount" v-model="return_amount" disabled="disabled">
					<input type="text" class="amount-input" v-else v-model="return_amount">
				</div>
			</li>
			<li class="mui-table-view-cell return-amount">
				最多￥{{goods.price+goods.freight}}，含邮费{{goods.freight}}元
			</li>
		</ul>


		<ul class="mui-table-view" v-if="get_datas.after_type != 1">
			<li class="mui-table-view-cell" >
				<a class="mui-navigate-right" @tap.prevent="showMask=show_shippins=true">
					快递公司
					<p class="mui-pull-right tips">{{shipping_tips}}</p>
				</a>
			</li>
			<li class="mui-table-view-cell">
				快递单号:
				<input type="text" v-model="shipping_no" class="remark-input" placeholder="请填写快递单号">
			</li>
		</ul>

		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				退款说明:
				<input type="text" v-model="content" class="remark-input" placeholder="选填">
			</li>
		</ul>

		<ul class="mui-table-view" style="margin-bottom: 50px;">
			<li class="mui-table-view-cell img-title">
				上传凭证
			</li>
			<li class="mui-table-view-cell">
				<div class="mui-row img-list">
					<div class="mui-col-xs-3" v-for="img in images">
						<div class="img-div">
							<img :src="img" class="img-responsive" alt="">
						</div>
					</div>

					<div class="mui-col-xs-3" @tap="uploadImg()">
						<div class="icon-img img-div">
							<i class="mui-icon iconfont icon-zhaoxiangji"></i>
						</div>
					</div>

					
				</div>
			</li>
		</ul>

		<div class="submit-btn" @tap="submit_apply()">提交</div>


		<div class="mask" v-if="showMask" @tap="hide_mask()">
			<div class="mask-container" @tap.stop="showMask = true">
				<div class="goods-status" v-if="show_mask_goods">
					<div class="mask-title">货物状态</div>
					<div class="mask-list">
						<ul class="mui-table-view">
						    <li class="mui-table-view-cell" @tap.stop="select_goods(item)" v-for="item in goods_status">
						    	<div class="mui-input-row mui-radio mui-right">
									<label>{{item.name}}</label>
									<input name="radio1" type="radio">
								</div>
							</li>
						</ul>
					</div>
				</div>

				<div class="return-reason" v-if="show_mask_return">
					<div class="mask-title">退款原因</div>
					<div class="mask-list">
						<ul class="mui-table-view">
						    <li class="mui-table-view-cell" @tap.stop="select_return(item)" v-for="item in return_money_reason">
						    	<div class="mui-input-row mui-radio mui-right">
									<label>{{item.name}}</label>
									<input name="radio1" type="radio">
								</div>
							</li>
						</ul>
					</div>
				</div>

				<div class="exchange-reason" v-if="show_mask_exchange">
					<div class="mask-title">换货原因</div>
					<div class="mask-list">
						<ul class="mui-table-view">
						    <li class="mui-table-view-cell" @tap.stop="select_exchange(item)" v-for="item in exchange_reason">
						    	<div class="mui-input-row mui-radio mui-right">
									<label>{{item.name}}</label>
									<input name="radio1" type="radio">
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="shippings" v-if="show_shippins">
					<div class="mask-title">快递公司</div>
					<div class="mask-list">
						<ul class="mui-table-view">
						    <li class="mui-table-view-cell" @tap.stop="select_shipping(item)" v-for="item in shippings">
						    	<div class="mui-input-row mui-radio mui-right">
									<label>{{item.name}}</label>
									<input name="radio1" type="radio">
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="mask-close-btn" @tap.stop="hide_mask()">关闭</div>
			</div>
		</div>

	</div>
{/block}
{block name="script"}
<script src="/assets/js/Huploadify/jquery.Huploadify.js"></script>
<script>
	// $('.img-div').css({'height':$('.img-div').width()+'px'});

	var new_vue = new Vue({
		el: '.apply',
		data: {
			get_datas: {$datas},
            goods:'',//退款商品信息
            showMask: false, //显示弹窗
            show_mask_goods: false, //显示货物状态列表
            show_mask_return: false, //显示退款原因列表
            show_mask_exchange: false, //显示换货原因列表
            show_shippins: false, //显示物流列表
			goods_status: [], //货物状态列表
			return_money_reason: [], //退款原因列表
			exchange_reason: [], //换货原因列表
			shippings: [], //快递列表
			goods_status_tips: '请选择', //
			return_reason_tips: '请选择',
			exchange_reason_tips: '请选择',
			goods_status_id: '', //选择的货物状态ID
			return_reason_id: '', //选择的退款原因ID
			exchange_reason_id: '', //选择的换货原因ID
			return_amount: 0, //退款金额
			max_amount: 0, //最大申请金额
			content: '', //售后说明 
			images: [], //图片凭证
			shipping_no: '', //快递单号
			shipping_id: '', //快递ID
			shipping_tips: '请选择',
		},
		mounted: function(){
			this.check_status();
		},
		methods: {
			//检查订单商品状态
			check_status: function(){
			    var that = this;
			    request(
			    	that, 
			    	{
			    		'url':'after_sales/check', 
			    		'data': {'order_id': that.get_datas.order_id, 'item_id': that.get_datas.item_id}
			    	}, 
			    	function(res){
				        if(res.code == 200){
				            that.goods = res.data.goods;
	                        that.goods_status = res.data.goods_status;
	                        that.return_money_reason = res.data.return_money_reason;
	                        that.exchange_reason = res.data.exchange_reason;
	                        that.shippings = res.data.shippings;
	                        if(that.get_datas.after_type != 3) {
	                            var total_amount = that.goods.price+that.goods.freight;
	                            that.return_amount = total_amount;
	                            that.max_amount = total_amount;
	                            
	                        }
				        } else if(res.code == 201) {
				            //存在示完成售后，到售后详情
				            location.href = '/mobile/aftersales/detail/id/'+res.data.id;
				        } else {
				            mui.alert(res.msg, '提示', function(){
				                mui.back();
				            })
				        }
			    },function(err){
                    mui.alert(err.body.msg, '提示', function(){
                        mui.back();
                    })
			    })
			},
			//隐藏mask
			hide_mask: function(){
				this.showMask = this.show_mask_exchange = this.show_mask_return = this.show_mask_goods = this.show_shippins = false;
			},
			//选择商品状态
			select_goods: function(item){
				this.goods_status_tips = item.name;
				this.goods_status_id = item.id;
				//隐藏弹窗
				this.hide_mask();
			},
			//选择退货款原因
			select_return: function(item){
				this.return_reason_tips = item.name;
				this.return_reason_id = item.id;
				this.hide_mask();
			},
			//选择换货原因
			select_exchange: function(item){
				this.exchange_reason_tips = item.name;
				this.exchange_reason_id = item.id;
				this.hide_mask();
			},
			//选择快递公司
			select_shipping: function(item) {
				this.shipping_id = item.id;
				this.shipping_tips = item.name;
				this.hide_mask();
			},
			//提交申请
			submit_apply: function(){
				var after_type = this.get_datas.after_type;
				var images = this.images.toString();
				var postData = {
					token: token,
					item_id: this.get_datas.item_id,
					type: after_type,
					amount: this.return_amount,
					content: this.content,
					images: images,
					shipping_no: this.shipping_no,
					shipping_id: this.shipping_id,
					goods_status_id: this.goods_status_id,
					return_id: this.return_reason_id,
					exchange_id: this.exchange_reason_id
				}
				console.log(postData);

				if(!this.goods_status_id && (after_type == 1 || after_type == 2)) {
					mui.toast('请选择货品状态');return;
				}


				if(!postData.return_id && (after_type == 1 || after_type == 2)) {
					mui.toast('请选择退款原因');return;
				}

				if(after_type ==3 && !postData.exchange_id) {
					mui.toast('请选择换货原因');return;
				}

				if(after_type == 2 && this.return_amount > this.max_amount) {
					mui.toast('最多申请退款'+this.max_amount+'元');return;
				}

				if(after_type == 2 || after_type == 3) {
					if(!this.shipping_id) {
						mui.toast('请选择快递公司');return;	
					}

					if(!this.shipping_no) {
						mui.toast('请填写快递单号');return;
					}
				}
				
				layer.open({
					type: 2,
					shadeClose: false,
				});

				var that = this;
				request(that, {'url': 'after_sales/apply', 'data': postData}, function(res){
				    var resData = res;
				    if(resData.code == 200) {
				        mui.alert(resData.msg, '提示', function(){
				            location.href = '/mobile/aftersales/index';
				        })
				    } else {
                        mui.alert(resData.msg,'提示');
				    }
				})
				
			},
			//上传图片
			uploadImg: function() {
				var imgs = this.images;
				if(imgs.length >= 3) {
				    mui.alert('最多上传3张');
				    return;
				}
				document.getElementById('file_upload_1-button').click();
			}
		}
	});

	//上传图片
    $('#up').Huploadify({
        auto:true,
        fileTypeExts:'*.jpg;*.png;*.jpeg;*.JPG;*.JPEG;*.PNG',
        multi:true,//能多图片上传
        formData:{ 'dirname':'applyInsure', 'name' : 'file'},
        fileSizeLimit:10240,//限制10M
        fileObjName : 'file',
        method:'post',
        buttonText :'<div class="upload-div"><img src="/assets/img/upload_img.png" class="upload-img" alt=""><p>上传图片</p></div>',
        showUploadedPercent:true,//是否实时显示上传的百分比，如20%
        showUploadedSize:true,
        removeTimeout:3,//进度条消失时间
        uploader:"{:url('api/ajax/upload')}",
        onUploadStart:function(){
            //alert('开始上传');

        },
        onInit:function(){
            //alert('初始化');
        },
        //上传成功
        onUploadSuccess: function(file, data, response) {
            var res = JSON.parse(data);

            if(res.code == 200){
            	new_vue.images.push(res.data.url);
            }else{
            	mui.alert(res.msg);
            }
        },
        //删除图片
        onDelete:function(file){
            console.log('删除的文件：'+file);
            console.log(file);
        }
    });
</script>
{/block}
